<div class="modal-content">
    <header class="modal-header" data-test-modal="verify-newsletter-email">
        {{#if this.verifyEmailTask.isRunning}}
            <h1>Verifying newsletter email address</h1>
        {{else if this.newsletter}}
            <h1>Email address verified</h1>
        {{else if this.error}}
            <h1>Email address verification failed</h1>
        {{/if}}
    </header>
    <button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>

    <div class="modal-body">
        {{#if this.verifyEmailTask.isRunning}}
            <div class="flex justify-center flex-auto">
                <div class="gh-loading-spinner"></div>
            </div>
        {{else if this.newsletter}}
            <p>
                Success! From address for newsletter
                <LinkTo @route="settings.newsletters.edit-newsletter" @model={{this.newsletter.id}}>{{this.newsletter.name}}</LinkTo>
                changed to <strong>{{this.newsletter.senderEmail}}</strong>
            </p>
        {{else if this.error}}
            <p>Verification failed:</p>
            <p>{{this.error}}</p>
        {{/if}}
    </div>

    <div class="modal-footer">
        <button
            type="button"
            class="gh-btn"
            {{on "click" @close}}
            {{on-key "Enter"}}
        >
            <span>Ok</span>
        </button>
    </div>
</div>
